<template>
  <div class="New_build">
    <div class="mask"></div>
    <div class="new_build">
      <div class="build-top">
        <p>改单（仓库调拨）</p>
        <i class="el-icon-close" @click="closeChange"></i>
      </div>

      <div class="build-info">
        <div class="build-info-1">
          <p>调拨日期</p>
          <el-date-picker
            class="build-inp"
            @blur="leave"
            v-model="allotTime"
            type="date"
          >
          </el-date-picker>

          <p class="t_content">调出仓库</p>
          <el-input
            disabled
            style="width:60px;margin-right:10px;"
            type="text"
            v-model="calloutWarehouse"
            @change="calloutWarehouseBlur"
          ></el-input>
          <el-select
            disabled
            style="width:100px;"
            v-model="calloutWarehouseName"
            @change="queryNo"
          >
            <el-option
              v-for="item in warehouseList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <p>数量</p>
          <el-input
            v-model="number"
            @blur="leave1"
            :disabled="Dis"
            class="build-inp"
          ></el-input>

          <p>款号</p>
          <el-input v-model="kindsNumber" class="build-inp" disabled></el-input>
        </div>
        <div class="build-info2">
          <p>调拨序号</p>
          <el-input
            v-model="allotSequence"
            disabled
            class="build-inp"
          ></el-input>

          <p class="t_content">调入仓库</p>
          <el-input
            disabled
            style="width:60px;margin-right:10px;"
            type="text"
            v-model="foldWarehouse"
            @change="foldWarehouseBlur"
          ></el-input>
          <el-select
            disabled
            style="width:100px;"
            v-model="foldWarehouseName"
            @change="queryNo1"
          >
            <el-option
              v-for="item in manufacturerList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <p>售价</p>
          <el-input
            v-model="sellingPrice"
            disabled
            class="build-inp"
          ></el-input>
          <!-- <p>调出仓名</p>
            <el-input disabled class="build-inp"></el-input> -->
        </div>

        <div class="build-info2">
          <p>备注</p>
          <el-input
            v-model="remark"
            @blur="leave"
            style="width:425px;"
          ></el-input>
        </div>

        <el-table
          height="280px"
          :data="tabList"
          highlight-current-row
          @row-click="rowClick"
          style="width: 100%"
          :header-cell-style="{
            background: '#f4f4f4',
            padding: 0,
            height: '40px',
          }"
          :cell-style="{ padding: 0, height: '36px' }"
        >
          <el-table-column
            prop="allotSequence"
            label="调拨序号"
            show-overflow-tooltip
            width="110px"
          >
          </el-table-column>
          <el-table-column prop="foldWarehouse" label="调入仓库">
          </el-table-column>
          <el-table-column prop="calloutWarehouse" label="调出仓库">
          </el-table-column>
          <el-table-column
            prop="calloutWarehouseName"
            show-overflow-tooltip
            label="调出仓名"
          >
          </el-table-column>
          <el-table-column
            prop="kindsNumber"
            show-overflow-tooltip
            label="款号"
          >
          </el-table-column>
          <el-table-column prop="number" label="数量"> </el-table-column>
          <el-table-column prop="allotTime" label="调拨日期"> </el-table-column>
          <el-table-column prop="remark" label="备注"> </el-table-column>
          <el-table-column prop="operator" label="操作员"> </el-table-column>
          <el-table-column prop="enteringTime" label="录入日期">
          </el-table-column>
          <el-table-column prop="status" label="修改状态"> </el-table-column>
        </el-table>
      </div>

      <div class="build-btn">
        <div style="margin:5px 20px 0 0">
          <el-button @click="closeChange">取消</el-button>
          <el-button type="primary" plain @click="saveChange">保存</el-button>
          <!-- <el-button type="primary" @click="keepGoing">继续录入</el-button> -->
        </div>
      </div>
    </div>

    <!-- <div class="popup" :style="{display:showPopup}">
      <div class="popup_t">
        <p>输入扫描数量</p>
        <i class="el-icon-close" @click="closePopup"></i>
      </div>
      <div class="popup_c">
        <p>请输入扫描数量</p>
        <p>如果不输入则扫描数量为1</p>
        <input type="text" v-model="one" class="popup_button">
      </div>
      <div class="popup_b">
        <el-button>删除</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </div> -->
  </div>
</template>

<script>
import { Form } from "element-ui";
// import { kindsNumberOutContinue, kindsNumberOut } from '../../../../network/customerOutTotal'
import { getWarehouse } from "../../../../network/warehouse";
import { putWarehouse } from "../../../../network/manufacturer";
export default {
  props: {
    showData: {
      // 上一任前端，传数组的时候，报错
      // type: Array,
      // default: []
      type: [Array],
      default() {
        return [];
      },
    },
  },
  created() {
    //仓库
    getWarehouse().then((res) => {
      console.log(res.data);
      let list = res.data.data;
      list.forEach((e) => {
        this.manufacturerList.push({
          value: e.no,
          label: e.name,
          value1: e.name,
        });
        this.warehouseList.push({ value: e.no, label: e.name, value1: e.name }); //调出
      });
    });
  },

  data() {
    return {
      Dis: false,
      tabList: [],
      showPopup: "none",
      allotTime: "",
      foldWarehouse: "",
      foldWarehouseName: "",
      manufacturerList: [],
      calloutWarehouse: "",
      calloutWarehouseName: "",
      warehouseList: [],
      number: "",
      kindsNumber: "",
      sellingPrice: "",
      remark: "",
      allotSequence: "",
      numList: [],
    };
  },
  methods: {
    //调出仓 编号
    queryNo() {
      for (let s of this.warehouseList) {
        if (s.value1 == this.calloutWarehouseName) {
          this.calloutWarehouse = s.value;
        }
      }
      for (let g of this.barcodeData) {
        g.calloutWarehouse = this.calloutWarehouse;
        g.calloutWarehouseName = this.calloutWarehouseName;
      }
    },
    queryNo1() {
      for (let s of this.manufacturerList) {
        if (s.value1 == this.foldWarehouseName) {
          this.foldWarehouse = s.value;
        }
      }
      for (let g of this.barcodeData) {
        g.foldWarehouse = this.foldWarehouse;
        g.foldWarehouseName = this.foldWarehouseName;
      }
    },

    closeChange() {
      this.$emit("closeChange");
    },

    saveChange() {
      putWarehouse(JSON.stringify(this.tabList[0])).then((res) => {
        console.log(res.data);
        if (res.data.code == 200) {
          this.$message.success({ message: "改单成功" });
        }
      });
      this.$emit("saveChange");
    },

    //调出仓库编号失去焦点
    calloutWarehouseBlur() {
      if (this.calloutWarehouse != "") {
        for (const i of this.warehouseList) {
          if (this.calloutWarehouse == i.value) {
            this.calloutWarehouseName = i.value1;
            return;
          }
        }
        this.$message({
          type: "warning",
          message: "无此仓库编号",
        });
        this.calloutWarehouse = "";
        this.calloutWarehouseName = "";
      } else {
        this.calloutWarehouseName = "";
      }
    },
    // 调入仓库失去焦点
    foldWarehouseBlur() {
      if (this.foldWarehouse != "") {
        for (let u of this.manufacturerList) {
          if (this.foldWarehouse == u.value) {
            this.foldWarehouseName = u.value1;
            return;
          }
        }
        this.$message({
          type: "warning",
          message: "无此仓库编号",
        });
        this.foldWarehouse = "";
        this.foldWarehouseName = "";
      } else {
        this.foldWarehouseName = "";
      }
    },
    leave() {
      for (let c of this.tabList) {
        if (this.kindsNumber == c.kindsNumber) {
          c.allotTime = this.allotTime;
          // c.calloutWarehouse = this.calloutWarehouse
          // c.calloutWarehouseName = this.calloutWarehouseName
          // this.tabList[c]["calloutWarehouseName"] = this.calloutWarehouseName
          c.number = this.number;
          // c.foldWarehouse = this.foldWarehouse
          // c.foldWarehouseName = this.foldWarehouseName
          c.remark = this.remark;
        }
      }
    },
    leave1() {
      this.numList = JSON.parse(localStorage.getItem("pcChangeList"));
      console.log(this.number);
      console.log(this.tabList);
    },

    rowClick(e) {
      localStorage.setItem("dbChangeList", JSON.stringify(this.tabList));
      this.remark = e.remark;
      this.allotTime = e.allotTime;
      this.foldWarehouse = e.foldWarehouse;
      this.foldWarehouseName = e.foldWarehouseName;
      this.calloutWarehouse = e.calloutWarehouse;
      this.calloutWarehouseName = e.calloutWarehouseName;
      this.number = e.number;
      this.kindsNumber = e.kindsNumber;
      this.sellingPrice = e.sellingPrice;
      this.allotSequence = e.allotSequence;
      if (e.dataSource == 0) {
        this.Dis = true;
      } else {
        this.Dis = false;
      }
    },
  },
  mounted() {
    // let _this = this
    // document.onkeydown = function(event){
    //   let e = event || window.event || arguments.callee.caller.arguments[0]
    //   if(e && e.keyCode==118){ // 按 F7
    //   // console.log("ffffffffff")
    //   if(_this.showPopup == 'none'){
    //     _this.showPopup = 'block';
    //   }else{
    //     _this.showPopup = 'none'
    //   }
    //   }
    // }
  },
  watch: {
    showData(a, b) {
      this.tabList = this.showData;
      this.saveList = JSON.parse(JSON.stringify(this.tabList));
      this.saveList.forEach((e) => {
        e.number = 0;
      });
    },
    foldWarehouseName(a, b) {
      for (let u of this.manufacturerList) {
        if (this.foldWarehouse == u.value) {
          this.foldWarehouseName = u.value1;
          return;
        }
      }
    },
    calloutWarehouseName(a, b) {
      if (this.calloutWarehouse != "") {
        for (const i of this.warehouseList) {
          if (this.calloutWarehouse == i.value) {
            this.calloutWarehouseName = i.value1;
            return;
          }
        }
      }
    },
  },
};
</script>

<style scoped>
.middle {
  padding: 10px 15px;
}
.middle p {
  padding-bottom: 10px;
}
._top {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 10px 15px;
  justify-content: space-between;
  background: #f8f8f8;
  font-weight: 700;
}
/* 新建资料 */
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  z-index: 9;
}
.new_build {
  position: fixed;
  /* position: relative; */
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1070px;
  height: 517px;
  z-index: 99;
  background-color: white;
  overflow: auto;
}
.new_build .build-top {
  height: 40px;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
}
.build-top p {
  font-weight: 700;
}

.new_build input {
  height: 30px;
  border: buildlid 1px #dcdfe6;
  border-radius: 5px;
  margin-left: 10px;
}
.new_build input:focus {
  outline: none;
  border: buildlid 1px #409eff;
}

.build-info {
  padding: 0 15px;
  padding-bottom: 10px;
  /* border-bottom: buildlid #f2f2f2 2px; */
}
.build-info-1 p {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 15px;
}

.build-info2 {
  display: flex;
  margin: 10px 0;
}
.build-info2 p {
  display: inline-block;
  width: 80px;
  text-align: right;
  margin-right: 15px;
}

.colorBox,
.infoBox {
  display: inline;
}

.build-btn {
  text-align: right;
}

.build-inp {
  width: 160px;
}
</style>

<style>
.new_build .build-info-4 .el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 41px;
  padding-right: 10px;
  height: 40px;
}
.new_build .build-info-4 .el-input__inner {
  border: 0px;
}
.new_build .build-info-4 .el-input__inner:focus {
  border: 1px solid #017aff;
}

/* .new_build .build-info-1 .el-input, .new_build .build-info-2 .el-input{
    margin-top: 10px;
    width: 160px;
  } */
.new_build .el-input__inner {
  height: 30px !important;
}
.new_build .el-input__icon {
  line-height: 30px !important;
}
</style>
